<template>
  <div class="content">
   
   
     <!-- 面包屑 -->
     <div class="mianbao" v-if="type==3">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item replace :to="{ path: '/personalCenter/myorder' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item replace :to="{ path: '/orderDetail?type='+this.qiantype+'&id='+this.eleid }">保单详情</el-breadcrumb-item>


        <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mianbao" v-else>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/pagesContent' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item replace :to="{ path: '/goodDetail?type='+this.qiantype }">保险详情</el-breadcrumb-item>
        <el-breadcrumb-item replace :to="{ path: '/insureAdd?type='+this.qiantype }">电梯责任保险投保</el-breadcrumb-item>

        <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>电梯基础信息</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
        <el-form-item label="电梯编号" prop="liftNum">
          <el-input v-model="ruleForm.liftNum" disabled placeholder="请输入电梯编号"></el-input>
        </el-form-item>
        <el-form-item label="品牌型号" prop="liftBrand">
         <el-input v-model="ruleForm.liftBrand" :disabled="type==3" placeholder="请输入品牌型号"></el-input>
        </el-form-item>
        <el-form-item label="《电梯准用证》号码" prop="liftPermit">
          <el-input v-model="ruleForm.liftPermit" :disabled="type==3" placeholder="请输入《电梯准用证》号码"></el-input>
        </el-form-item>
        <el-form-item label="《电梯准用证》有效期" prop="liftPeriod">
         <el-input v-model="ruleForm.liftPeriod" :disabled="type==3" placeholder="请输入《电梯准用证》有效期"></el-input>
        </el-form-item>
        <el-form-item label="运行速度(m/s)" prop="liftSpeed">
          <el-input v-model="ruleForm.liftSpeed" :disabled="type==3" type="number" placeholder="请输入运行速度(m/s)"></el-input>
        </el-form-item>
         <el-form-item prop="liftUseTime" label="投入使用时间">
          <el-date-picker type="month" :disabled="type==3"  placeholder="选择日期" value-format="yyyy-MM" v-model="ruleForm.liftUseTime" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="有无专职管理人员" prop="hasProfessional">
         <el-radio-group v-model="ruleForm.hasProfessional" :disabled="type==3">
            <el-radio :label="1">有</el-radio>
            <el-radio :label="2">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="载重量(kg)" prop="weight">
         <el-input v-model="ruleForm.weight" type="number" :disabled="type==3" placeholder="请输入载重量(kg)"></el-input>
        </el-form-item>
        <el-form-item label="电梯准用证图片" prop="permitCertificateImg">
          <ImagePreview
                  v-if="type==3&&ruleForm.permitCertificateImg"
                  :src="ruleForm.permitCertificateImg"
                  width="50px"
                  height="50px"
                  :prediv-src-list="[ruleForm.permitCertificateImg]"
                />
          <el-upload
          v-else
            class="upload-demo"
              :action="qiniuUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
             :data="upData"
            :limit="1"
            :file-list="fileList"
            :multiple="false"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2m</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="电梯合格证图片" prop="conformityCertificateImg">
          <ImagePreview
                  v-if="type==3&&ruleForm.conformityCertificateImg"
                  :src="ruleForm.conformityCertificateImg"
                  width="50px"
                  height="50px"
                  :prediv-src-list="[ruleForm.conformityCertificateImg]"
                />
          <el-upload
            v-else
            class="upload-demo"
             :action="qiniuUrl"
            :on-preview="handlePreview2"
            :on-remove="handleRemove2"
            :on-success="handleSuccess2"
             :before-upload="beforeUpload2"
             :data="upData"
            :limit="1"
            :file-list="fileList2"
            :multiple="false"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2m</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
    <el-button type="primary" class="btn" @click="submitForm">{{type==3?"返回":"立即提交"}}</el-button>
    
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { qiniutoken } from "@/api/bx.js"
export default {
  name: "goodDetail",//个人中心 
  data() {
    return {
      loading: false, // 加载状态
      type:0,
      title:"电梯信息",
      fileList:[],
      fileList2:[],
      ruleForm: {},
      rules: {
          liftNum: [
            { required: true, message: '电梯编号不能为空', trigger: 'blur' },
            { min: 4, max: 30, message: '长度在 4 到 35 个字符', trigger: 'blur' }
          ],
          liftBrand: [
            { required: true, message: '品牌型号不能为空', trigger: 'change' }
          ],
          liftPermit: [
            { required: true, message: '《电梯准用证》号码不能为空', trigger: 'blur' }
          ],
          liftPeriod: [
            { required: true, message: '《电梯准用证》有效期不能为空', trigger: 'blur' }
          ],
          liftSpeed: [
            { required: true, message: '运行速度不能为空', trigger: 'change' },
            { type: 'number', message: '请输入数字', trigger: 'blur',transform: (value) => {
              return Number(value);
            } }
          ],
          liftUseTime: [
            { required: true, message: '投入使用时间不能为空', trigger: 'blur' },
          ],
          weight: [
            { required: true, message: '载重量不能为空', trigger: 'change' },
            { type: 'number', message: '请输入数字', trigger: 'blur',transform: (value) => {
              return Number(value);
            }}
          ],
          permitCertificateImg: [
            { required: true, message: '电梯准用证图片不能为空', trigger: 'blur' }
          ],
          conformityCertificateImg: [
            { required: true, message: '电梯合格证图片不能为空', trigger: 'blur' }
          ],
          hasProfessional: [
            { required: true, message: '有无专职管理人员不能为空', trigger: 'change' }
          ],
        },
        qiniuUrl:'',
        realmName:'',
        upData:{
          token: '',
          key: '',
          bucket: "tiyulife",
        },
        qiantype:1,
        eleid:this.$route.query.id

    };
  },
  computed: {
    ...mapState(['user']),
    
  },
  created(){
    this.getToken()
    this.qiniuUrl = this.$qiniuUrl
    this.realmName = this.$realmName
    this.qiantype=this.$route.query.qiantype

    var type=this.$route.query.type
    this.type=type
     this.ruleForm={...this.user.eleObj} 
     if(this.type==3&&this.$route.query.id){
      this.eleid=this.$route.query.id
     }

     if(this.ruleForm.permitCertificateImg){
				this.fileList=[]
				this.fileList.push({
					name:'电梯准用证',
					url:this.ruleForm.permitCertificateImg,
				})
			}
			if(this.ruleForm.conformityCertificateImg){
				this.fileList2=[]
				this.fileList2.push({
					name:'电梯合格证',
					url:this.ruleForm.conformityCertificateImg,
				})
			}
  },
  
  methods: {
    ...mapActions(['changeeleObj']),
     //获取七牛token
    getToken() {
      qiniutoken().then(res => {
        // console.log(res)
        this.upData.token = res.msg
      })
    },
    submitForm() {
      if(this.type==3){
        this.$router.go(-1)
        return
      }
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if(!this.ruleForm.natureOfUse){
						this.ruleForm.natureOfUse='载人'
					}
          this.changeeleObj(this.ruleForm)
          sessionStorage.setItem('eleobj',JSON.stringify(this.ruleForm))
          this.$router.go(-1)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    beforeUpload(file) {
      console.log(file)
      var now=new Date().getTime()
      this.upData.key= now +'-'+ file.name
    },
    handleSuccess(res, file){
      console.log(res, file);
      this.ruleForm.permitCertificateImg=this.realmName + res.key;
    },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      beforeUpload2(file) {
        console.log(file)
        var now=new Date().getTime()
        this.upData.key= now +'-'+ file.name
      },
      handleSuccess2(res, file){
        this.ruleForm.conformityCertificateImg=this.realmName + res.key;
      console.log(res, file);
    },
     handleRemove2(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview2(file) {
        console.log(file);
      }
  },
  
};
</script>
<style scoped lang="scss">
.content{
  padding-bottom: 45px;
  background: #fff;
  .mianbao{
    max-width: 1200px;
    margin:0  auto 16px;
    padding-top: 20px;
  }
  .box-card{
    max-width: 1200px;
    margin: 25px auto 30px;
    .row1{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .zuo{
        font-size: 16px;
        color: #333333;
      }
      .you{
        font-size: 16px;
        color: #999999;
        .qian{
          color: #165DFF;
          font-weight: bold;
        }
      }
    }
    .neirong{
      width: 100%;
      height: fit-content;
      padding: 16px;
      box-sizing: border-box;
      background: rgba(22, 93, 255, .1);
      border-radius: 8px;
      font-weight: 400;
      font-size: 14px;
      color: #165DFF;
      line-height: 27px;
      text-indent: 2rem;
      margin-bottom: 20px;
    }
  }
  .btn{
    width: 1200px;
    height: 80px;
    margin: 30px auto;
    display: block;
    font-size: 40px;
  }

}
</style>
